<script lang="ts">
  import Button from "$lib/buttons/Button.svelte";
  import ArrowRight from "../utils/icons/ArrowRight.svelte";
  import Figma from "../utils/icons/Figma.svelte";
  import FlowbiteLogo from "../utils/icons/FlowbiteLogo.svelte";
  import Section from "./utils/Section.svelte";
</script>

<Section tinted class="lg:py-24">
  <div class="grid grid-cols-1 justify-between py-1 lg:grid-cols-2">
    <div class="flex max-w-lg flex-col gap-8">
      <div class="flex flex-col items-start gap-6">
        <h2 class="text-3xl leading-none font-extrabold text-gray-900 lg:text-4xl dark:text-white">Design with Figma</h2>
        <p class="text-lg">Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools.</p>
      </div>
      <div class="flex flex-col items-center gap-4">
        <p class="self-stretch">Our design system is being used by a large number of devs:</p>
        <div class="max-w-l isolate flex flex-col items-start gap-4 self-stretch">
          <Button
            color="light"
            class="max-w-lg justify-start! gap-5 self-stretch px-4! sm:gap-7"
            size="xl"
            href="https://www.figma.com/file/5pHMkriSz9q98zawojb4mx/flowbite-pro-figma-v2.5.0?node-id=18-0&t=X431WUvSP7jsPiEI-0"
          >
            <Figma /> Preview in Figma
            <div class="ms-auto hidden sm:block"><ArrowRight /></div>
          </Button>
          <Button color="light" class="max-w-lg justify-start! gap-4 self-stretch px-4! sm:gap-6" size="xl" href="https://flowbite.com/figma/">
            <FlowbiteLogo /> Learn more
            <div class="ms-auto hidden sm:block"><ArrowRight /></div>
          </Button>
        </div>
      </div>
    </div>
    <div class="hidden h-full flex-col items-center justify-center lg:flex">
      <div class="relative block rounded-xl dark:hidden">
        <img class="max-w-auto w-full" src="/images/figma.png" alt="Header" />
      </div>
      <div class="relative hidden dark:block">
        <img class="max-w-auto w-full rounded-xl" src="/images/figma-dark.png" alt="Header" />
      </div>
    </div>
  </div>
</Section>
